<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<!-- 外部的引入文件 -->
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.css">

<script src="js/jquery.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/swiper.min.js"></script>
<!-- 本页面的样式和效果 -->
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="swiper-container" id="box">
    <!-- 音乐和图标部分 -->
    <div class="music_logo">
        <img id="music_click" src="images/small/music_off.png" alt="">
        <audio id="music_mp3" src="am.mp3" loop="loop"  autoplay="autoplay"></audio>
    </div>
    <!-- 分屏部分 -->
    <div class="swiper-wrapper">
       <!-- 第1屏 -->
        <div class="swiper-slide one">
            <div class="trans ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="3s" swiper-animate-delay="0s">
                <img src="images/small/houdunwang.png" alt="">
                <div class="line"></div>
                <div class="zhuan"></div>
            </div>
            <div class="ads ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="1s">后盾IT教育</div>
            <div class="word ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="3s" swiper-animate-delay="1s">我们的使命：传播互联网最前沿技术。</div>
            <ul class="link">
                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="1s"><img src="images/small/weixin.png" alt=""></li>
                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="1.5s"><img src="images/small/qq.png" alt=""></li>
                <li class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="2s"><img src="images/small/weibo.png" alt=""></li>
            </ul>
        </div>
        <!-- 第2屏 -->
        <div class="swiper-slide two">
            <div class="content ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                <div class="cover ani"></div>
                <article class="art">
                    <h1 class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="1s">
                       后盾IT教育&nbsp;&nbsp;&nbsp;
                       <img class="ani" swiper-animate-effect="flip" swiper-animate-duration="2s" swiper-animate-delay="4s" src="images/small/logo_blue.png" alt="">
                    </h1>
                    <hr class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s" swiper-animate-delay="1s">
                    <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="4s" swiper-animate-delay="2s">后盾网是专注于培养中国互联网顶尖PHP程序语言专业人才的专业型培训机构，拥有五年培训行业经验。后盾网拥有国内最顶尖的讲师和技术团队，团队成员项目经验均在8年以上，团队曾多次为国内外上市集团、政府机关的大型项目提供技术支持，其中包括新浪、搜狐、腾讯、宝洁公司、联想、丰田、工商银行、中国一汽等众多大众所熟知的知名企业。</p>
                    <div class="airplane ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="5s" swiper-animate-delay="2s"/></div>
                </article>
            </div>
        </div>
         <!-- 第3屏 -->
        <div class="swiper-slide three">
           <div class="top ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s" swiper-animate-delay="0s">
               <img class="ani" swiper-animate-effect="gun" swiper-animate-duration="3s" swiper-animate-delay="0.5" class="houdun" src="images/small/houdunwang.png" alt="">
               <h1 class="ani" swiper-animate-effect="tada" swiper-animate-duration="1s" swiper-animate-delay="2s">课程&体系</h1>
           </div>
           <ul class="content ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="0s">
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="1s">1.&nbsp;&nbsp;Html  Css</li>
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="1.5s">2.&nbsp;&nbsp;Javascript jquery</li>
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="2s">3.&nbsp;&nbsp;Php </li>
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="2.5s">4.&nbsp;&nbsp;Mysql</li>
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="3s">5.&nbsp;&nbsp;Linux</li>
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="3.5s">7.&nbsp;&nbsp;Html5 Css3</li>
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="4s">8.&nbsp;&nbsp;微信端接口</li>
               <li class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="4.5s">9.&nbsp;&nbsp;HDphp HDcms </li>
           </ul>
        </div>
        <!-- 第4屏 -->
        <div class="swiper-slide four">
            <h1 class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="0.2">The team</h1>
            <h3 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="0.5">我们有业界最顶尖的讲师团队</h3>
            <ul class="content">
                <li class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="4s" swiper-animate-delay="1s">
                   <img src="images/people/xiangjun.jpg" alt="">
                   <span>向军</span>
                </li>
                <li class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="4s" swiper-animate-delay="1.5s">
                   <img src="images/people/mazhenyu.jpg" alt="">
                   <span>马震宇</span>
                </li>
                <li class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="4s" swiper-animate-delay="2s">
                   <img src="images/people/guli.jpg" alt="">
                   <span>古丽</span>
                </li>
                <li class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="4s" swiper-animate-delay="2.5s">
                   <img src="images/people/sunqizheng.jpg" alt="">
                   <span>孙琪峥</span>
                </li>
            </ul>
        </div>
        <!-- 第5屏 -->
        <div class="swiper-slide five">
            <ul class="box">
                <li>
                    <div class="left ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
                        <span class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s">向军</span>
                        <p class="ani" swiper-animate-effect="fadeIn
                        " swiper-animate-duration="3s" swiper-animate-delay="1s">HDPHP框架和HDCMS系统的作者</p>
                    </div>
                    <img class="right ani" swiper-animate-effect="shakes" swiper-animate-duration="1s" swiper-animate-delay="1s" src="images/people/xiangjun.jpg" alt="">
                </li>
                <li>
                    <div class="left ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
                        <span class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2s">马震宇</span>
                        <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="2s">新生代优秀青年讲师的代表</p>
                    </div>
                    <img class="right ani" swiper-animate-effect="shakes" swiper-animate-duration="1s" swiper-animate-delay="2s" src="images/people/mazhenyu.jpg" alt="">
                </li>
                <li>
                    <div class="left ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="2.5s">
                        <span class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="3s">古丽</span>
                        <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="3s">后盾网招生咨询部主任</p>
                    </div>
                    <img class="right ani" swiper-animate-effect="shakes" swiper-animate-duration="1s" swiper-animate-delay="3s" src="images/people/guli.jpg" alt="">
                </li>
                <li>
                    <div class="left ani" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="3.5s">
                        <span class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">孙琪峥</span>
                        <p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="3s" swiper-animate-delay="4s">专治各种零基础，人送外号“小白杀手”</p>
                    </div>
                    <img class="right ani" swiper-animate-effect="shakes" swiper-animate-duration="1s" swiper-animate-delay="4s" src="images/people/sunqizheng.jpg" alt="">
                </li>
            </ul>
        </div>
        <!-- 第6屏 -->
        <div class="swiper-slide six">
            <div class="title ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.3s">后盾三原色</div>
            <ul class="content">
                <li class="li1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
                    <span class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s">责任</span>
                </li>
                <li class="li2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="1s">
                    <span class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="1s">实力</span>
                </li>
                <li class="li3 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                    <span class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="2s" swiper-animate-delay="1.5s">情感</span>
                </li>
            </ul>
        </div>
         <!-- 第7屏 -->
        <div class="swiper-slide seven">
            <ul class="box">
                <li class="li1 ani" swiper-animate-effect="flip" swiper-animate-duration="1s" swiper-animate-delay="0s">
                    <img src="images/people/tjb.jpg" alt="">
                    <h3>谈及波</h3>
                    <p>工作两个月即当上项目负责人的后盾毕业</p>
                </li>
                <li class="li2 ani" swiper-animate-effect="flip" swiper-animate-duration="1s" swiper-animate-delay="0.2s">
                    <img src="images/people/med.jpg" alt="">
                    <h3>买尔旦</h3>
                    <p>刻苦 懂事 勤奋的维族小伙儿</p>
                </li>
                <li class="li3 ani" swiper-animate-effect="flip" swiper-animate-duration="1s" swiper-animate-delay="0.4s">
                    <img src="images/people/qhb.jpg" alt="">
                    <h3>屈海波</h3>
                    <p>看大学生村官的成功转型之路 毕业起薪</p>
                </li>
                <li class="li4 ani" swiper-animate-effect="flip" swiper-animate-duration="1s" swiper-animate-delay="0.6s">
                    <img src="images/people/xqh.jpg" alt="">
                    <h3>向强华</h3>
                    <p>开朗有个性的90后应届大学毕业生</p>
                </li>
                <div class="circle ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">
                    <div class="circle_son ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.1s">高薪就业</div>
                </div>
            </ul>
        </div>
        <!-- 第8屏 -->
        <div class="swiper-slide eight">
            <div class="title ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0s">后盾IT教育</div>
            <div class="content ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
                <div class="son ani"  swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.7s">
                    <span class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.2s">关注我们</span>
                    <hr class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                    <p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="2s">北京市朝阳区孙河顺白路12号</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 分页器 -->
    <div class="swiper-pagination"></div> 
    
    <!-- 前进后退按钮 -->
<!--     <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->

</div>
<!-- js的引入 -->
<script src="js/js.js"></script>
</body>
</html>